<html>
	<head>
		<meta charset="utf-8" />
		<title>Code Paste</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<style type="text/css">
			body{
				font-size: 16px;
				font-family: Microsoft Yahei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif !important;
				line-height: 18px;
				background: #eee;
				margin: 0px auto 10px auto;
				color: #34495E;
			}
			a{
				color: #3498DB;
				text-decoration: none;
			}
			img{
				max-width: 100%;
			}
			p{
				margin:0;
			}
			a,input,button{
			    outline: none !important;
			    -webkit-appearance: none;
			    border-radius: 0;
			}
			button::-moz-focus-inner,input::-moz-focus-inner{
			    border-color:transparent !important;
			}
			:focus {
			    border: none;
			    outline: 0;
			}
			::selection {
				background:#3498DB;
				color:#fff;
			}
			::-moz-selection {
				background:#3498DB;
				color:#fff;
			}
			::-webkit-selection {
				background:#3498DB;
				color:#fff;
			}
			/* 设置滚动条的样式 */
			::-webkit-scrollbar {
				width: 10px;
			}
			/* 滚动槽 */
			::-webkit-scrollbar-track {
				background-color: #eee;
			}
			/* 滚动条滑块 */
			::-webkit-scrollbar-thumb {
				background: rgba(0,0,0,0.1);
			}
			::-webkit-scrollbar-thumb:hover {
				background: rgba(0,0,0,0.3);
			}
			h1,h2,h3,h4,h4,h5,h6{
				font-weight:100;
				margin: 0;
			}

			#header{
				background-color: #34495E;
				width: 100%;
				height: 48px;
				color: #fff;
				font-size: 24px;
			}
			#content{
				box-shadow: 0px 2px 6px rgba(100, 100, 100, 0.3);
				margin: 50px auto 15px auto;
				max-width: 1100px;
				background: #fff;
				padding: 10px 20px 20px;
			}
			@media screen and (max-width: 1180px){
				#content{
					margin: 50px 20px 15px 20px;
					width: auto;
				}
			}
			#submit{
				float:right;
				display:inline-block;
				margin: 0px 0 0 0;
				background-color: #3498DB;
				color: #fff;
				border: 0;
				padding: 5px 15px;
				font-size: 16px;
				box-shadow: 0px 2px 6px rgba(100, 100, 100, 0.3);
				transition: background-color 0.2s;
				cursor: pointer;
			}
			#submit:hover{
				background: #45A9EC;
			}
		</style>
		<script src="//cdn.bootcss.com/ace/1.1.9/ace.js"></script>
		<script type="text/javascript">
			var EditorAce;
			window.onload = function(){
				//初始化ACE编辑器
				EditorAce = ace.edit("editor");
				EditorAce.setTheme("ace/theme/solarized_light");
				EditorAce.getSession().setMode("ace/mode/python");
				EditorAce.getSession().setUseWrapMode(true);
			}
			function change_lang(lang){
				EditorAce.getSession().setMode("ace/mode/"+lang);
			}
			function submit(){
				document.getElementById("form-code").value=EditorAce.getValue();
				document.getElementById("the-form").submit();
			}
		</script>
	</head>



	<body>
		<div id="header">
			<div style="padding:12px">
				<h1 style="font-size:24px">Code Paste</h1>
			</div>
		</div>
		<div id="content">
			<p style="font-size:20px;margin:6px 0 18px;display:inline-block;" >Just paste code here and submit</p>
			<button onclick="submit();" id="submit">Submit</button>
			<form id="the-form" action="do.php" method="post" style="margin:0px 30px 0 0;display:inline-block;float:right">
				<input id="form-code" type="hidden" name="code">
				<input id="form-lang" type="hidden" name="language">
				Language: <select id='form-lang' name="lang" style="padding:5px;" onchange="change_lang(this.value)" >
					<option value="c">C</option>
					<option value="cpp">C++</option>
					<option value="python" selected="selected">Python</option>
					<option value="javascript">Javascript</option>
					<option value="php">PHP</option>
					<option value="java">Java</option>
					<option value="perl">Perl</option>
					<option value="ruby">Ruby</option>
					<option value="csharp">C#</option>
					<option value="sas">SAS</option>
					<option value="sql">SQL</option>
					<option value="markup">HTML</option>
					<option value="css">CSS</option>
					<option value="bash">BASH</option>
					<option value="coffeescript">CoffeeScript</option>
				</select>
			</form>
			<div id="editor" style="height:550px;width:100%"></div>
		</div>
	</body>
</html>
